<template>
	<view class="article-editor">
		<view class="form-field">标题</view>
		<input type="text" class="article-title" v-model="title" placeholder="该处输入文章标题(60字以内)" maxlength="60" />
		<view class="form-field">
			封面
			<view class="addPic">
				<text @tap="addMedia('cover')">{{ cover ? '替换' : '添加' }}</text>
				<text @tap="removeCover" class="remove-cover" v-show="cover">删除</text>
			</view>
		</view>
		<view class="article-cover" @tap="addMedia('cover')">
			<image :src="cover" mode="aspectFit" v-show="cover"></image>
			<text v-show="!cover">请添加封面</text>
		</view>
		<view class="form-field">
			内容
			<text class="addPic" @tap="addMedia('detail')">添加图片</text>
		</view>
		<textarea v-model="content" auto-height="true" maxlength="20000" class="article-content"
			placeholder="该处输入文章内容" />

		<button class="save" @tap="saveArticle">{{ articleId ? '完成编辑' : '发布' }}</button>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/request.js'
	import {
		blogCreate,
		blogUpdate,
		blogDetail,
		mediaUpload
	} from '../../api.js'

	export default {
		data() {
			return {
				title: '',
				content: '',
				cover: '',
				articleId: 0
			}
		},
		onLoad(options) {
			let {
				articleId
			} = options
			this.articleId = articleId
			uni.setNavigationBarTitle({
				title: !this.articleId ? '新建文章' : '编辑文章'
			})

			if (this.articleId) {
				request(`${blogDetail + '/' + this.articleId}`).then(res => {
					let info = res.data
					this.title = info.title
					this.content = info.content
					this.cover = info.cover
				})
			}
		},
		onShow() {},
		methods: {
			isValidInfo(res) {
				if (!res.title || !res.content) {
					uni.showToast({
						icon: 'none',
						title: '标题或内容不能为空'
					})
					return false
				}
				return true
			},
			async updateArticleStorage(res) {
				let globalData = getApp().globalData
				let list = globalData.articleList

				if (this.articleId) {
					let ret = await request(blogUpdate, res, 'post')

					// let info = list.find(item=>item.id = this.articleId)
					// info.title = res.title
					// info.content = res.content
					// info.summary = res.content.substring(0,40),
					// info.category = res.category || '',
					// info.author = {
					// 	avatar: globalData.avatar,
					// 	name: globalData.nickname
					// }
				} else {
					let ret = await request(blogCreate, res, 'post')

					// list.push({
					// 	id: list.length + 1,
					// 	title: res.title,
					// 	author: {
					// 		avatar: globalData.avatar,
					// 		name: globalData.nickname
					// 	},
					// 	cover: res.cover,
					// 	summary: res.content.substring(0, 40),
					// 	content: res.content,
					// 	like_count: 0,
					// 	comment_count: 0,
					// 	category: res.category || ''
					// })
				}

				uni.showToast({
					title: this.articleId ? '已保存' : '已发布',
					success: () => {
						// uni.navigateBack({
						// 	delta: 1
						// })
					}
				})

				// uni.setStorageSync('articleList', list)
			},
			saveArticle() {
				let res = {
					blogId: this.articleId,
					title: this.title.trim(),
					content: this.content.trim(),
					cover: this.cover,
					openid: getApp().globalData.openid
				}
				if (this.isValidInfo(res)) {
					this.updateArticleStorage(res)
				}
			},
			addMedia(type) {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						let tempFilePaths = res.tempFilePaths
						switch (type) {
							case 'cover':
								this.cover = await this.uploadMedia(tempFilePaths)
								break
							default:
								break
						}
					}
				})
			},
			uploadMedia(files, name = 'cover') {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://t15.test.drcloud.me/media/upload',
						filePath: files[0],
						name,
						success: (res) => {
							const data = res.data

							console.log(data)
							uni.showToast({
								title: '上传成功'
							})
							resolve(data.url)
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败，请重新尝试'
							})
							reject(err)
						}
					})
				})
			},
			removeCover() {
				this.cover = ''
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
		padding: 20rpx 20rpx 180rpx;
		box-sizing: border-box;
	}

	.article-editor {
		display: flex;
		flex-direction: column;
	}

	.form-field {
		display: flex;
		margin: 20rpx 0;
		align-items: center;
	}

	.addPic {
		flex: 1;
		text-align: right;
		font-size: 24rpx;
		color: #007AFF;
	}

	.remove-cover {
		margin-left: 20rpx;
		color: #fe587a;
	}

	.article-title {
		width: 670rpx;
		background-color: #f3f3f5;
		font-size: 28rpx;
		padding: 20rpx;
	}

	.article-cover {
		border: 1px dashed #f0f1f4;
		width: 200rpx;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.article-cover image {
		max-width: 100%;
		max-height: 100%;
	}

	.article-content {
		width: 670rpx;
		background-color: #f3f3f5;
		font-size: 28rpx;
		padding: 20rpx;
		line-height: 40rpx;
		min-height: 300rpx;
	}

	.save {
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
		color: #fff;
		background: #007AFF;
		z-index: 11;
	}

	.save:active {
		background: #1a82fc;
	}
</style>
